<script lang="ts" setup>
import {useRouter} from 'vue-router';
import {onMounted, ref} from "vue";
import {memberGetPageCourses} from "@/api/course/index.js";
import {memberGetPageCoaches} from "@/api/coach/index.js";
import {ElMessage} from "element-plus";
import type {Course, PageCourse} from "@/type/course.ts";
import type {Coach, PageCoach} from "@/type/coach.ts";
import MemberImg from '@/assets/img/member.png'
import type {Equipment, PageEquipment} from "@/type/equipment.ts";
import {MemberGetPageEquipments} from "@/api/equipment";

const router = useRouter();

const equipments = ref<Equipment[]>([])
const courses = ref<Course[]>([])
const coaches = ref<Coach[]>([])

onMounted(async () => {
  const equipmentPageData: PageEquipment = {
    page: 1,
    pageSize: 3
  }
  const coursePageData: PageCourse = {
    page: 1,
    pageSize: 3
  }
  const coachPageData: PageCoach = {
    page: 1,
    pageSize: 3
  }
  try {
    const result0 = await MemberGetPageEquipments(equipmentPageData)
    const result1 = await memberGetPageCourses(coursePageData)
    const result2 = await memberGetPageCoaches(coachPageData)
    console.log(result1.data,result2.data)
    if (result0.code === 1) {
      equipments.value = result0.data.records
    }
    if (result1.code === 1) {
      courses.value = result1.data.records
    }
    if (result2.code === 1) {
      coaches.value = result2.data.records
    }
  } catch (e) {
    ElMessage.error((e as Error).message)
  }
  console.log(coaches.value[0].introduction,courses.value[0].courseDescription)
})

const goTo = (page: string) => {
  router.push(`/${page}`);
};
</script>

<template>
  <div class="home-page">
    <!-- 顶部banner -->
    <div class="banner">
      <h1>欢迎来到健身中心</h1>
      <p>我们的健身中心为您提供最优质的设备、专业的教练、丰富的课程，帮助您达到最佳的健身效果。</p>
    </div>

    <!-- 设备板块 -->
    <div class="section" v-if="equipments.length > 0">
      <el-card :body-style="{ padding: '20px' }" class="section-card">
        <div class="card-content">
          <h2>我们的设备</h2>
          <p>我们提供最先进的健身设备，包括有氧、力量训练设备，帮助您全方位提升体能。</p>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-image
                  class="content-image"
                  fit="cover"
                  :src="equipments[0].image"
              />
              <h3>{{ equipments[0].equipmentName }}</h3>
              <p>{{ equipments[0].equipmentType }}</p>
            </el-col>
            <el-col :span="8">
              <el-image
                  class="content-image"
                  fit="cover"
                  :src="equipments[1].image"
              />
              <h3>{{ equipments[1].equipmentName }}</h3>
              <p>{{ equipments[1].equipmentType }}</p>
            </el-col>
            <el-col :span="8">
              <el-image
                  class="content-image"
                  fit="cover"
                  :src="equipments[2].image"
              />
              <h3>{{ equipments[2].equipmentName }}</h3>
              <p>{{ equipments[2].equipmentType }}</p>
            </el-col>
          </el-row>
          <el-button type="primary" @click="goTo('equipment1/equipmentInfo')">查看详情</el-button>
        </div>
      </el-card>
    </div>

    <!-- 课程板块 -->
    <div class="section" v-if="courses.length > 0">
      <el-card :body-style="{ padding: '20px' }" class="section-card">
        <div class="card-content">
          <h2>我们的课程</h2>
          <p>提供各种课程，包括瑜伽、健美操等，适合各类健身需求。</p>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-image
                  :src="courses[0].image"
                  class="content-image"
                  fit="cover"
              />
              <h3>{{ courses[0].courseName }}</h3>
              <p>{{ courses[0].courseDescription }}</p>
            </el-col>
            <el-col :span="8">
              <el-image
                  :src="courses[1].image"
                  class="content-image"
                  fit="cover"
              />
              <h3>{{ courses[1].courseName }}</h3>
              <p>{{ courses[1].courseDescription }}</p>
            </el-col>
            <el-col :span="8">
              <el-image
                  :src="courses[2].image"
                  class="content-image"
                  fit="cover"
              />
              <h3>{{ courses[2].courseName }}</h3>
              <p>{{ courses[2].courseDescription }}</p>
            </el-col>
          </el-row>
          <el-button type="primary" @click="goTo('course1/courseInfo')">查看详情</el-button>
        </div>
      </el-card>
    </div>

    <!-- 教练板块 -->
    <div class="section" v-if="coaches.length > 0">
      <el-card :body-style="{ padding: '20px' }" class="section-card">
        <div class="card-content">
          <h2>我们的教练</h2>
          <p>我们的资深教练会根据您的需求量身定制个性化训练计划。</p>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-image
                  :src="coaches[0].avatar"
                  class="content-image"
                  fit="cover"
              />
              <h3>{{ coaches[0].coachName }}</h3>
              <p>{{ coaches[0].introduction }}</p>
            </el-col>
            <el-col :span="8">
              <el-image
                  :src="coaches[1].avatar"
                  class="content-image"
                  fit="cover"
              />
              <h3>{{ coaches[1].coachName }}</h3>
              <p>{{ coaches[1].introduction }}</p>
            </el-col>
            <el-col :span="8">
              <el-image
                  :src="coaches[2].avatar"
                  class="content-image"
                  fit="cover"
              />
              <h3>{{ coaches[2].coachName }}</h3>
              <p>{{ coaches[2].introduction }}</p>
            </el-col>
          </el-row>
          <el-button type="primary" @click="goTo('coach1/coachInfo')">查看详情</el-button>
        </div>
      </el-card>
    </div>

    <!-- 会员中心板块 -->
    <div class="section">
      <el-card :body-style="{ padding: '20px' }" class="section-card">
        <div class="card-content">
          <h2>会员中心</h2>
          <p>成为我们的会员，享受专属课程、设备和教练服务。</p>
          <el-image
              class="content-image"
              fit="cover"
              :src="MemberImg"
          />
          <h3>会员特权</h3>
          <p>享受专属课程。</p>
          <el-button type="primary" @click="goTo('memberCenter/memberInfo')">查看详情</el-button>
        </div>
      </el-card>
    </div>

    <!-- 页尾 -->
    <div class="footer">
      <p>&copy; 2025 健身中心 版权所有</p>
      <p>联系方式: xxx-xxxx-xxxx</p>
    </div>
  </div>
</template>

<style scoped lang="scss">
.home-page {
  background: linear-gradient(135deg, #f4f4f9, #ffffff);
  padding: 20px 0;

  .banner {
    text-align: center;
    padding: 60px 0;
    background-color: #ffffff;

    h1 {
      font-size: 3rem;
      color: #333;
      margin-bottom: 10px;
    }

    p {
      font-size: 1.5rem;
      color: #666;
    }
  }

  .section {
    padding: 50px 0;
    display: flex;
    justify-content: center;
    .el-image {
      width: 300px;
      height: 300px
    }
    .section-card {
      width: 80%;
      max-width: 1200px;
      margin: 0 auto;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease;
      background-color: rgba(255, 255, 255, 0.95);

      &:hover {
        transform: translateY(-10px);
      }

      .card-content {
        text-align: center;

        h2 {
          font-size: 1.8rem;
          color: #333;
          margin-bottom: 10px;
        }

        h3 {
          font-size: 1.4rem;
          color: #333;
          margin-top: 10px;
        }

        .content-image {
          border-radius: 8px;
          margin-bottom: 10px;
        }

        .el-button {
          margin-top: 20px;
        }
      }
    }
  }

  .footer {
    background-color: #eeeeee;
    padding: 20px;
    text-align: center;
    font-size: 1rem;
    color: #777;
  }
}
</style>